<template>
  <div>
    <a-modal
      title="操作回执编号"
      v-model="visible"
      :width="700"
      :footer="null"
      @cancel="onCancel"
    >
      <a-alert show-icon type="warning" message="本操作仅针对商标注册，非常规业务无效，谨慎操作" />
      <p></p>
      <a-form-model
        :model="searchForm"
      >
        <a-form-model-item>
          <a-input-search :loading="loading" size="large" placeholder="请输入要操作的注册商标名称，如：天猫" enter-button @search="onSearch" />
        </a-form-model-item>
      </a-form-model>
      <a-table
        size="middle"
        :loading="loading"
        :row-key="(record) => record.cb_id"
        :columns="searchColumns"
        :data-source="searchData"
        :pagination="false"
      >
<!--        <template slot="title">-->
<!--          <a-upload-->
<!--            name="file"-->
<!--            accept=".zip"-->
<!--            :multiple="true"-->
<!--            :headers="headers"-->
<!--            :action="uploadUrl"-->
<!--            :show-upload-list="false"-->
<!--            @change="onChange"-->
<!--          >-->
<!--            <a-button size="small" type="danger" icon="upload">上传本次全部回执文件(.zip)</a-button>-->
<!--          </a-upload>-->
<!--        </template>-->
        <template slot="sb_reg_no" slot-scope="text,record">
          <a-input style="width: 150px" v-model="stateForm['reg' + record.cb_id]"></a-input>
          <a-button type="link" icon="save" @click="saveRegNo(record.cb_id)"></a-button>
        </template>
        <template slot="action" slot-scope="text,record">
          <a-upload
            name="file"
            accept=".pdf"
            :multiple="true"
            :headers="headers"
            :action="uploadUrl"
            :show-upload-list="false"
            @change="(info) => onChange1(info, record.cb_id)"
          >
            <a-button size="small" type="link" icon="upload">上传</a-button>
          </a-upload>
        </template>
      </a-table>
    </a-modal>
    <a-modal
      v-model="inputVisible"
      title="设置"
      :width="400"
      @ok="onSubmit"
    >
      <a-form-model
        ref="inputForm"
        :model="inputForm"
        :rules="inputRules"
      >
        <a-form-model-item label="官方原始编号" prop="official_order_no">
          <a-input v-model="inputForm.official_sb_reg_no" @blur="onBlur" />
        </a-form-model-item>
        <a-form-model-item label="商标注册号" prop="sb_reg_no">
          <a-input v-model="inputForm.sb_reg_no" />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
import trademarkColumns from '@/columns/tm.process'
import apis from '@/api'
import storage from 'store'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import { editReg, postEditReg2, searchTrade, uploadRec, editRegNo } from '@/api/tm.process'
import { ocrPdf } from '@/api/other'

export default {
  name: 'BatchAction',
  data () {
    return {
      loading: false,
      inputVisible: false,
      visible: true,
      searchForm: {},
      searchColumns: trademarkColumns.batch_set,
      searchData: [],
      inputForm: {},
      inputRules: {
        official_order_no: [
          { required: true, message: '必须扫描20位官方回执编号', trigger: 'blur' },
          { length: 20, message: '官方回执编号长度有误', trigger: 'blur' }
        ],
        sb_reg_no: []
      },
      tab: 1,
      uploadUrl: apis.Upload,
      headers: {
        'Access-Token': storage.get(ACCESS_TOKEN)
      },
      uploadForm: {},
      uploadVisible: false,
      stateForm: {}
    }
  },
  methods: {
    saveRegNo (id) {
      const app = this
      const data = {}
      data['contractBusiness[sb_reg_no]'] = app.stateForm['reg' + id]
      editRegNo(id, data).then(res => {
        if (res.status === 0) {
          app.onSearch(app.searchForm['filter[sb_name]'])
        } else {
          app.$warning({
            title: res.msg
          })
        }
      })
    },
    onCancel () {
      this.visible = false
      this.$emit('cancel', this.visible)
    },
    onSearch (value) {
      this.loading = true
      this.searchForm['filter[sb_name]'] = value
      searchTrade(this.searchForm).then(res => {
        this.searchData = res.result.data
        for (let i = 0; i < res.result.data.length; i++) {
          this.stateForm['reg' + res.result.data[i].cb_id] = res.result.data[i].sb_reg_no
        }
      }).finally(() => {
        this.loading = false
      })
    },
    onEdit (id) {
      this.inputForm['cb_id'] = id
      this.inputVisible = true
    },
    onBlur () {
      const str = this.inputForm.official_sb_reg_no
      this.$set(this.inputForm, 'sb_reg_no', str.slice(15, 23))
    },
    onSubmit () {
      const app = this
      const data = {}
      app.$refs.inputForm.validate(valid => {
        if (valid) {
          data['contractBusiness[official_sb_reg_no]'] = this.inputForm.official_sb_reg_no
          data['contractBusiness[sb_reg_no]'] = this.inputForm.sb_reg_no
          editReg(this.inputForm.cb_id, data).then(res => {
            if (res.status === 0) {
              this.onSearch(this.searchForm['filter[sb_name]'])
              this.inputForm = {}
              this.inputVisible = false
            }
          })
        } else {
          return false
        }
      })
    },
    onUpload () {
      this.uploadVisible = true
    },
    onChange (info) {
      if (info.file.status === 'uploading') {
        return false
      }
      if (info.file.status === 'done') {
        this.uploadForm['file[filename]'] = info.file.name
        this.uploadForm['file[value]'] = info.file.response.result.url
        uploadRec(this.uploadForm).then(res => {
          if (res.status === 0) {
            this.onSearch(this.searchForm['filter[sb_name]'])
          }
        })
      }
    },
    onChange1 (info, id) {
      const app = this
      app.loading = true
      if (info.file.status === 'uploading') {
        return false
      }
      if (info.file.status === 'done') {
        ocrPdf(info.file.response.result.url).then(res => {
          if (res.status === 0) {
            const data = {}
            data['wordsInfo'] = res.result.wordsInfo
            data['contract_business_state[file]'] = info.file.response.result.url
            data['contract_business_state[filename]'] = info.file.name
            postEditReg2(id, data).then(res => {
              if (res.status === 0) {
                app.onSearch(app.searchForm['filter[sb_name]'])
                app.loading = false
              } else {
                app.$warning({
                  title: res.msg
                })
              }
            })
          } else {
            this.$warning({
              title: res.msg
            })
          }
        })
      }
    }
  }
}
</script>

<style scoped>
  .container {
    width: 1200px;
    margin: 0 auto;
  }
</style>
